<template>
  <div class="login">
    <div class="content">
      <h4>登录账号</h4>
      <p>虾米 - 严选商城欢迎您</p>

      <!-- 手机号 -->
      <my-input
        placeholder="手机号码"
        v-model="mobile"
        @blur="mobileFtn"
        :class="reMobile == 0 ? '' : reMobile == 1 ? 'success' : 'error'"
      >
        <template #rule>
          {{ reMobile == 2 ? "必填" : "" }}
        </template>
        <template #icon>
          <i class="iconfont icon-shouji"></i>
        </template>
      </my-input>
      <!-- 密码 -->

      <my-input
        placeholder="密码"
        v-model="pwd"
        :class="rePwd == 0 ? '' : rePwd == 1 ? 'success' : 'error'"
        :type="showPwd ? 'text' : 'password'"
        @blur="pwdFtn"
      >
        <template #rule>
          {{ rePwd == 2 ? "必填" : "" }}
        </template>
        <template #icon>
          <van-icon
            :name="showPwd ? 'eye-o' : 'closed-eye'"
            @click="showPwd = !showPwd"
          />
        </template>
      </my-input>
      
      <button class="footBtn" @click="loginFtn">立即登录</button>
      
      <router-link custom to="/reset" v-slot="{ navigate }">
        <span class="foot-center" @click="navigate">忘记密码</span>
      </router-link>

      <router-link custom to="/register" v-slot="{ navigate }">
        <p class="link_to" @click="navigate">还没有注册？ 立即注册</p>
      </router-link>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { login } from "../../api/secendPage/index";
import myInput from "../../components/myInput.vue";
import { useRouter } from "vue-router";
import { Notify } from "vant";
export default {
  components: { myInput },
  setup() {
    const router = useRouter();
    const data = reactive({
      mobile: '',
      pwd: '',
      reMobile: 0, // 手机号的验证
      rePwd: 0, // 密码的验证
      showPwd: false, // 是否显示密码
    })

    const mobileFtn = () => { // 手机号验证的函数
       let rule = /^1[3-9][0-9]{9}$/; 
       // test 正则的验证方法
      //  console.log(rule.test(data.form.mobile));
      data.reMobile = rule.test(data.mobile)?1:2
    }

    const pwdFtn = () => { // 密码的验证函数
    //    data.rePwd = data.pwd?1:2
       let rule = /^[a-zA-z0-9_]{6,18}$/;
       data.rePwd = rule.test(data.pwd)?1:2
    }
    
    const loginFtn = () => {
      login({mobile:data.mobile,pwd:data.pwd}).then(res => {
          if (res.code == 0){
            localStorage.setItem('token',res.data.token);
            // router.push('/index');
            router.back();
          } else {
             Notify({ type: 'danger', message: res.msg});
          }
          
      })
    }
    return{
      ...toRefs(data),
      mobileFtn,
      pwdFtn,
      loginFtn
    }
  },
};
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.content {
  border: 1px solid #f5f5f5;
  padding: 10px 30px;
  box-sizing: border-box;
//   text-align: center;
  h4 {
    margin-top: 30px;
  }
  p {
    font-size: 16px;
    margin-top: 40px;
    color: #909090;
  }
}
.van-icon {
  font-size: 18px;
}
.footBtn {
  width: 210px;
  height: 42px;
  background: linear-gradient(90deg, #5ea6f8, #bb87f6);
  border: none;
  font-size: 16px;
  border-radius: 5px;
  color: #fff;
  margin: 20px auto;
  display: block;
}
.link_to {
  font-size: 14px;
  color: #549ff9 !important;
  text-align: center;
}
.foot-center{
  font-size: 12px;
  color: #989898;
  display: block;
  text-align: center;
}
// .iconfont{
//   vertical-align: middle;
// }
</style>